<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{admin/layout}">

<head>
	<title>Data Manage</title>
	<style>

	</style>
</head>

<body layout:fragment="content">
	<div class="row">
	  <div class="col-xl-12 mb-3">
	    <!-- Booking from START -->
	    <form class="bg-mode shadow rounded-3 position-relative p-4 pe-md-5 pb-5 pb-md-4" th:action="@{/admin/data}">
	      <div class="row g-4 align-items-center">
	        <!-- Location -->
	        <div class="col-lg-4">
	          <div class="d-flex">
	            <!-- Icon -->
	            <i class="bi bi-calendar fs-3 me-2 mt-2"></i>
	            <!-- Date input -->
	            <div class="form-control-border form-control-transparent form-fs-md">
	              <label class="form-label">First Date</label>
	              <input type="text" class="form-control flatpickr first-date" placeholder="Select date" name="start" th:value="${start}">
	            </div>
	          </div>
	        </div>
	
	        <!-- Check in -->
	        <div class="col-lg-4">
	          <div class="d-flex">
	            <!-- Icon -->
	            <i class="bi bi-calendar fs-3 me-2 mt-2"></i>
	            <!-- Date input -->
	            <div class="form-control-border form-control-transparent form-fs-md">
	              <label class="form-label">Last Date</label>
	              <input type="text" class="form-control flatpickr last-date" placeholder="Select date" name="end" th:value="${end}">
	            </div>
	          </div>
	        </div>
	
	        <div class="col-lg-4">
	          <div class="d-flex">
	            <button type="submit" class="icon-lg btn btn-round btn-primary mb-0" onclick="search()"><i class="bi bi-search fa-fw"></i></button>
	          </div>
	        </div>
	
	      </div>
	    </form>
	    <!-- Booking from END -->
	  </div>
	</div>
	<div class="row g-4 mb-5">
		<!-- Booking Chart START -->
		<div class="col-lg-6 col-xxl-6">
			<!-- Chart START -->
			<div class="card shadow h-100">
				<!-- Card header -->
				<div class="card-header border-bottom">
					<h5 class="card-header-title">Order Amount</h5>
				</div>

				<!-- Card body -->
				<div class="card-body">
					<!-- Content -->
					<div class="d-flex gap-4 mb-3">
						<h6><span class="fw-light"><i class="bi bi-square-fill text-primary"></i> Total </h6>
					</div>
					<!-- Apex chart -->
					<div id="ChartOrderSize" class="mt-2"></div>
				</div>
			</div>
			<!-- Chart END -->
		</div>
		<!-- Booking Chart END -->

		<!-- Booking graph START -->
		<div class="col-lg-6 col-xxl-6">
			<div class="card shadow h-100">
				<!-- Card header -->
				<div class="card-header border-bottom">
					<h5 class="card-header-title">Sport Publish</h5>
				</div>

				<!-- Card body -->
				<div class="card-body">
					<!-- Content -->
					<div class="d-flex gap-4 mb-3">
						<h6><span class="fw-light"><i class="bi bi-square-fill text-primary"></i> Sport Count</h6>
					</div>
					<!-- Apex chart -->
					<div id="ChartSportSize" class="mt-2"></div>
				</div>
			</div>
		</div>
		<!-- Booking graph END -->
	</div>
	<!---->

	<script layout:fragment="script">
		$(document).ready(function () {
			
			flatpickr($('.flatpickr'), {
	            mode: 'single',
	            enableTime: false,
	            noCalendar: false,
	            inline: false,
	            animate: "false",
	            position: "top",
	            dateFormat: 'Y-m-d',
	            disableMobile: "true"
	          });
			
			orderData()
			sportData()
		});
		function search(){
			let first = $('.first-date').val()
			let last = $('.last-date').val()
			if(!first || !last){
				layer.msg('Select full date');
				return false
			}
			orderData()
			sportData()
		}
		function orderData() {
			var orderOptions = {
				series: [{
					name: 'Total',
					data: []
				}],
				chart: {
					height: 350,
					type: 'area'
				},
				colors: [
					ThemeColor.getCssVariableValue('--bs-primary')
				],
				dataLabels: {
					enabled: false
				},
				stroke: {
					curve: 'smooth'
				},
				xaxis: {
					//type: 'day',
					categories: []
				},
			};
			$.get(ctx + "/admin/orderData?s="+ $('.first-date').val() +"&e=" + $('.last-date').val(), function (resp) {
				console.log(resp)
				if (resp.status == 0) {
					orderOptions.xaxis.categories = resp.categories
					orderOptions.series[0].data = resp.series
				}else{
					orderOptions.xaxis.categories = []
					orderOptions.series[0].data = []
					layer.msg(resp.msg);
				}
				var chart = new ApexCharts(document.querySelector("#ChartOrderSize"), orderOptions);
				chart.render();
			})
		}
		function sportData() {
			var sportOptions = {
				series: [{
					name: 'Sport Count',
					data: []
				}],
				chart: {
					height: 350,
					type: 'bar'
				},
				colors: [
					ThemeColor.getCssVariableValue('--bs-primary')
				],
				dataLabels: {
					enabled: false
				},
				stroke: {
					curve: 'smooth'
				},
				xaxis: {
					type: 'day',
					categories: []
				},
			};
			$.get(ctx + "/admin/sportData?s="+ $('.first-date').val() +"&e=" + $('.last-date').val(), function (resp) {
				console.log(resp)
				if (resp.status == 0) {
					sportOptions.xaxis.categories = resp.categories
					sportOptions.series[0].data = resp.series
				}else{
					sportOptions.xaxis.categories = []
					sportOptions.series[0].data = []
					layer.msg(resp.msg);
				}
				var chart = new ApexCharts(document.querySelector("#ChartSportSize"), sportOptions);
				chart.render();
			})
		}
	</script>
</body>

</html>